<template>
  <main>
    <div class="bg-img">
      <img src="../../assets/img/login.png" alt="" />
    </div>
    <div class="login-container">
      <div @keyup.enter="submitForm()" class="login-form-container">
        <el-form :model="passForm" status-icon ref="passForm" class="passForm">
          <el-form-item>
            <h1 style="color: white; margin-bottom: 20px">
              欢迎登录投标管理系统
            </h1>
          </el-form-item>
          <el-form-item prop="username">
            <el-input
              prefix-icon="el-icon-user"
              placeholder="请输入账号"
              type="text"
              clearable
              v-model="passForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
              type="password"
              show-password
              v-model="passForm.password"
              autoComplete="new-password"
            ></el-input>
          </el-form-item>
          <el-form-item style="text-align: center">
            <div class="active-button">
              <a href="javascript:void(0)" @click="submitForm">
                <span></span> <span></span> <span></span>
                <span></span> 登录
              </a>
            </div>
          </el-form-item>
        </el-form>
        <div class="signin-now">
          还没有账号 ？ <a @click="signIn">->立即注册</a>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import { userLogin, makeFakeData } from "api/login.api";
import Store from "store";

export default {
  name: "Login",
  data() {
    return {
      passForm: {
        username: "",
        password: "",
      },
      loading: false,
    };
  },
  mounted() {
    console.log(Store._mutations.setUserInfo);
  },
  computed: {
    isBadSubmit() {
      const { username, password } = this.passForm;
      return !username || !password;
    },
  },
  methods: {
    submitForm() {
      this.loading = true;
      setTimeout(() => {
        const { code, data, msg } = userLogin(this.passForm);
        console.log(code, data, msg);
        if (code !== 0) {
          this.$message.error(msg);
          this.loading = false;
          return;
        }
        this.$store.commit("setUserInfo", data);
        this.$message.success(msg);
        this.$router.push({ path: "/homepage" });
        makeFakeData();
      }, 0);
    },
    signIn() {
      this.$router.push({ path: "/register" });
    },
  },
};
</script>

<style lang="less" scoped>
.bg-img {
  position: absolute;
  top: 0;
  width: 100%;
  overflow: hidden;
  height: 100%;
  z-index: -1;
  > img {
    width: 100%;
    height: 100%;
  }
}
::v-deep {
  .el-button {
    width: 180px;
    border-radius: 10px;
  }
  .el-input__inner {
    border-radius: 8px;
  }
}
@keyframes textDance {
  0% {
    color: white;
    padding: 0px;
  }
  25% {
    color: antiquewhite;
  }
  50% {
    color: bisque;
    padding-left: 10px;
  }
  75% {
    color: rgb(143, 90, 90);
  }
  100% {
    color: white;
    padding-left: 0;
  }
}
.login-container {
  display: flex;
  height: 100%;
  position: absolute;
  width: 100%;
  align-items: center;
  justify-content: center;
  .login-form-container {
    padding: 50px 40px 60px;
    width: 560px;
    border-radius: 8px;
    box-shadow: 7px 4px 15px 0 rgba(0, 0, 0, 76%);
  }
  .signin-now {
    color: white;
    > a {
      animation: textDance 2s infinite;
      cursor: pointer;
    }
  }
}
</style>